Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Quickstart 404 GET /app/main.js

I'm trying the quickstart of Angular 2 but I don't get that it works. I've been finding out some similar questions but I didn´t find the answer. Anyone can help me?

This my code.

app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

main.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

index.html

  <html>
   <head>
     <title>Angular 2 QuickStart</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">    
     <link rel="stylesheet" href="styles.css">

     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
     <script src="node_modules/systemjs/dist/system-polyfills.js">   </script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

package.json

 {
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
  "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",    
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "lite": "lite-server",
  "typings": "typings",
  "postinstall": "typings install" 
 },
 "license": "ISC",
 "dependencies": {
 "angular2": "2.0.0-beta.7",
 "systemjs": "0.19.22",
 "es6-promise": "^3.0.2",
 "es6-shim": "^0.33.3",
 "reflect-metadata": "0.1.2",
 "rxjs": "5.0.0-beta.2",
 "zone.js": "0.5.15"
 },
 "devDependencies": {
 "concurrently": "^2.0.0",
 "lite-server": "^2.1.0",
 "typescript": "^1.8.2",
 "typings":"^0.6.8"
 }
}

tscoding.json

{
  "compilerOptions": {
  "target": "ES6",
  "module": "system",
  "moduleResolution": "node",
  "sourceMap": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "removeComments": false,
  "noImplicitAny": false
  },
  "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
 ]
}

npm start output

> npm start

> [email protected] start /Users/dpcrespo/Google   Drive/projects/tutorials/angular/angular2-quickstart
> concurrently "npm run tsc:w" "npm run lite"

[0]
[0] > [email protected] tsc:w /Users/dpcrespo/Google     Drive/projects/tutorials/angular/angular2-quickstart
[0] > tsc -w
[0]
[1]
[1] > [email protected] lite /Users/dpcrespo/Google    Drive/projects/tutorials/angular/angular2-quickstart
[1] > lite-server
[1]
[0] Version 1.8.7
[0] Syntax:   tsc [options] [file ...]
[0]
[0] Examples: tsc hello.ts
[0]           tsc --out file.js file.ts
[0]           tsc @args.txt
[0]
[0] Options:
[0]  --allowJs                           Allow javascript files to be compiled.
[0]  --allowSyntheticDefaultImports      Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
[0]  --allowUnreachableCode              Do not report errors on unreachable code.
[0]  --allowUnusedLabels                 Do not report errors on unused labels.
[0]  -d, --declaration                   Generates corresponding '.d.ts' file.
[0]  --experimentalDecorators            Enables experimental support for ES7 decorators.
[0]  --forceConsistentCasingInFileNames  Disallow inconsistently-cased references to the same file.
[0]  -h, --help                          Print this message.
[0]  --init                              Initializes a TypeScript project and creates a tsconfig.json file.
[0]  --jsx KIND                          Specify JSX code generation: 'preserve' or 'react'
[0]  --mapRoot LOCATION                  Specifies the location where debugger should locate map files instead of generated locations.
[0]  -m KIND, --module KIND              Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'
[0]  --moduleResolution                  Specifies module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
[0]  --newLine NEWLINE                   Specifies the end of line sequence to be used when emitting files: 'CRLF' (dos) or 'LF' (unix).
[0]  --noEmit                            Do not emit outputs.
[0]  --noEmitOnError                     Do not emit outputs if any errors were reported.
[0]  --noFallthroughCasesInSwitch        Report errors for fallthrough cases in switch statement.
[0]  --noImplicitAny                     Raise error on expressions and declarations with an implied 'any' type.
[0]  --noImplicitReturns                 Report error when not all code paths in function return a value.
[0]  --noImplicitUseStrict               Do not emit 'use strict' directives in module output.
[0]  --outDir DIRECTORY                  Redirect output structure to the directory.
[0]  --outFile FILE                      Concatenate and emit output to single file.
[0]  --preserveConstEnums                Do not erase const enum declarations in generated code.
[0]  --pretty KIND                       Stylize errors and messages using color and context. (experimental)
[0]  -p DIRECTORY, --project DIRECTORY   Compile the project in the given directory.
[0]  --reactNamespace                    Specifies the object invoked for createElement and __spread when targeting 'react' JSX emit
[0]  --removeComments                    Do not emit comments to output.
[0]  --rootDir LOCATION                  Specifies the root directory of input files. Use to control the output directory structure with --outDir.
[0]  --sourceMap                         Generates corresponding '.map' file.
[0]  --sourceRoot LOCATION               Specifies the location where debugger should locate TypeScript files instead of source locations.
[0]  --suppressImplicitAnyIndexErrors    Suppress noImplicitAny errors for indexing objects lacking index signatures.
[0]  -t VERSION, --target VERSION        Specify ECMAScript target version: 'ES3' (default), 'ES5', or 'ES2015' (experimental)
[0]  -v, --version                       Print the compiler's version.
[0]  -w, --watch                         Watch input files.
[0]  @<file>                             Insert command line options and files from a file.
[0] npm run tsc:w exited with code 0
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync options **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  ------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.0.9:3000
[1]  ------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.0.9:3001
[1]  ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.16 11:30:42 304 GET /index.html
[1] 16.03.16 11:30:42 304 GET /styles.css
[1] 16.03.16 11:30:42 304 GET /node_modules/es6-shim/es6-shim.min.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system-    polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2-polyfills.js
[1] 16.03.16 11:30:42 304 GET /node_modules/systemjs/dist/system.src.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/es6/dev/src/testing/shims_for_IE.js
[1] 16.03.16 11:30:42 304 GET /node_modules/rxjs/bundles/Rx.js
[1] 16.03.16 11:30:42 304 GET /node_modules/angular2/bundles/angular2.dev.js
[1] 16.03.16 11:30:42 404 GET /app/main.js

In my browser

enter image description here

It's like if it doesn't transpile main.ts file to main.js

Thanks in advance.

like image 967
Daniel Perez Avatar asked Mar 16 '16 11:03

Daniel Perez


3 Answers

I got this error as well.

In my case I had named the tsconfig.json wrong. When I changed to tsconfig.json, ran npm install again and then npm start it all worked.

like image 102
Nicklas Blomqvist Avatar answered Oct 18 '22 16:10

Nicklas Blomqvist


Try changing the map in the config. In my case I have

System.config({
    transpiler: 'typescript',
    typescriptOptions: { emitDecoratorMetadata: true },
    packages: {'app': {defaultExtension: 'ts'}},
    map: { 'app': './app' }
  });

where /app is the folder in which the components(.ts) are created

like image 44
coder2017 Avatar answered Oct 18 '22 18:10

coder2017


In your index.html is reference to app/main. Do you have your main.ts file in folder named app or in the root?

like image 26
David Slavík Avatar answered Oct 18 '22 17:10

David Slavík