发表新帖
发表新帖

TS2307: Cannot find module 'angular2/core' while importing Angular2 on TypeScript

前端 未结
关注
8 1607
庸人自扰
庸人自扰 2021-01-31 03:39

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 angu

相关标签:
8条回答
  • 无人共我
    2021-01-31 03:51

    Use '@angular/core' instead 'angular2/core'

    0 讨论(0)
  • 清酒与你
    2021-01-31 03:52

    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:

    1. Node.js with npm package manager.
    2. Typescript with compiler.
    3. A text editor or any IDE, VS Code.
    4. Any browser, like Chrome.

    Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:

    1. Create a root folder name of your choice like ng2Playground.
    2. Now you have to create one more folder inside it which actually holds all the .ts files/ Component files, You can name it app name is just as per docs.
    3. Now at the root level you have to put 4 files.
      3.1. tsconfig.json
      3.2 typings.json
      3.3 package.json
      3.4 index.html
    4. When you set it up, as we are not finished yet but you can 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>

    Okay!

    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.

    Yay!!!

    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.

    0 讨论(0)
  • 长发绾君心
    2021-01-31 03:52

    Do this in index.html:

    <html>

<head>
    <base href="/"></base>
</head>

<body>
    <app>Loading....</app>
</body>

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
    System.config({
                defaultJSExtensions: true
            });

</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>    
<script>
    System.import('App');
</script>

</html>

    try using this your first component:

    import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
    selector: 'app',
    template: "Hello"
})
export class App{  
    constructor(){ }    
}

bootstrap(App);

    your Index.html file has missing alot. like importing main component using system.js. i.e System.import('App');

    tsconfig.json:

    {
  "version": "1.5.3",
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  }
}
    0 讨论(0)
  • 南旧
    2021-01-31 03:58

    Make sure folder 'node_modules' (click show hidden files) is in the right location (in the project's root, sibling with wwwroot). Also check @angular is showing in the project Dependencies folder:

    [proj. name]/Dependencies/npm/@angular...

    I was moving files around as I was integrating the quickstart guide into a new ASP.NET Core project, and the node_modules folder was misplaced.

    hope this helps

    0 讨论(0)
  • 一整个雨季
    2021-01-31 03:59

    You may forgot to run :

    npm install

    under your angular-project/

    0 讨论(0)
  • 不知归路
    2021-01-31 04:03

    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"
  ]
}
    0 讨论(0)
 看不清?
提交回复
热议问题