Menu
Hi I have a lil bit of Angular 1 background, I am learning Angular 2.
for starting up with Angular 1, only dependency is to add the angular sources either the angular.js or angular.min.js,
when trying the same with the Angular 2 via script tag,
<script src="angular2.js"></script> I am getting errors like,
Uncaught ReferenceError: System is not definedUncaught ReferenceError: define is not definedso I have searched over SE and found, system.js and require.js must be added loaded before loading angular2.
any way I managed to load the both libraries,
I love to compile the TypeScript and serve the js file than sending all script to client and compiling/transpiling everything client side.
My IDE is WebStorm and when I try to write a simple component,
import {Component} from 'angular2/core'; @Component class Hello{ name:string; constructor() { this.name = "HelloWorld"; } } I am getting this error on TypeScript compiler on main.ts, which compiles to main.js,
Error:(1, 25) TS2307: Cannot find module 'angular2/core'. TypeScript compiles everything but not importing from angular.
my simple index.html is shown below,
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> <script src="system.js"></script> <script src="require.js"></script> <script src="angular2.js"></script> <script src="main.js"></script> </body> </html> What is causing TypeScript not to import modules from angualr2? should I configure TypeScript with Angular2?
I am totally new to TypeScript,
Thank you so much for any help
Update
the tsc main.ts --watch output:
main.ts(1,25): error TS2307: Cannot find module 'angular2/core'. main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. 11:43:39 PM - Compilation complete. Watching for file changes. 
723
As you are new to TypeScript. I still suggest you to follow angular.io docs for 5 min startup. That has specific instruction and quite well explained to get started with it.
Angular2 5 min quickstart page @ angular.io.
What you need to have basically to start:
Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:
.ts files/ Component files, You can name it app name is just as per docs. npm start when we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.Now what should be there in these files as per point 3.
3.1 : tsconfig.json:
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }3.2 : typings.json
{ "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } }3.3 : package.json
{ "name": "ng2-test", "version": "1.0.0", "scripts": { "start": "concurrent \"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.7.5", "typings":"^0.6.8" } }
Going very well, congratulations! Yet we need the most important file index.html.
3.4 : index.html
<!doctype html> <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 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/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> We have our basic setup quite well, yet we need to install all the dependencies and devdependencies, which is absolutely required. You need to run npm install. This will install all the dependency which we have in the package.json.
When package installation finishes you can find one folder named node_modules which is having all the files as per dependencies in the package.json.
If any error occurs while npm install you just need to update the dev/dependencies.
So, i am assuming you have all the dependencies installed and just let's start:
Now as per point 2, we have a folder named app now we will put our .ts files in it.
Create a file named app.component.ts, see the naming convention .component.ts which denotes that it is a component file. Put this code in it:
import {Component} from 'angular2/core'; // <-- importing Component from core @Component({ selector: 'my-app', //<----the element defined in the index.html template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component. }) export class AppComponent { } // <--- we need to export the class AppComponent. Now create another file named main.ts. Why main.ts? This is because of index.html, we have defined our Systemjs module loader, see this in index.html
System.import('app/main')
This the content of main.ts:
import {bootstrap} from 'angular2/platform/browser' // import bootstrap import {AppComponent} from './app.component' // import the component we just created bootstrap(AppComponent); // finally bootstrap it. Now we are done.
Yet we need to run it, for this we have to cd ng2Playgroud into it. we need to run this command from command prompt or if you have git bash installed run this:
npm start and hit enter. Now it will compile and start the lite-server installed as a dependency. If everything goes well then you'll see the template My First Angular 2 App rendered in the browser.
81
I was able to resolve this issue by adding "moduleResolution" : "node" to my tsconfig.json file
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main.d.ts", "typings/main" ] } 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
