Menu
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
It's like if it doesn't transpile main.ts file to main.js
Thanks in advance.
967
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.
102
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
44
In your index.html is reference to app/main. Do you have your main.ts file in folder named app or in the root?
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
