asp.net-core

Angular2 and .Net Core

Quick tutorial for an Angular 2 Hello World! App with .Net Core in Visual Studio 2015

Steps:

  1. Create Empty .Net Core Web App:

enter image description here 2. Go to wwwroot, and create a normal html page called Index.html: enter image description here 3. Configure Startup.cs to accept static files (this will require to add “Microsoft.AspNetCore.StaticFiles”: “1.0.0” library in the “project.json” file): enter image description here enter image description here 4. Add NPN File: - Right click the WebUi project and add NPN Configuration File (package.json): enter image description here - Verify the last versions of the packages: enter image description here

    Note: If visual studio does not detect the versions of the packages (Check all packages, because some of them does show the version, and some others don't), it might be because the Node version coming in visual studio is not working correctly, so it will probably require to install node js externally and then link that installation with visual studio.

    i. Download and install node js: https://nodejs.org/es/download/

    ii. Link the installation with visual studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/:
    [![enter image description here][7]][7]
    iii. (Optional) after saving the package.json it will install the dependencies in the project, if not, run "npm install" using a command prompt from the same location as the package.json file.

    Note: Recommended to install "Open Command Line", an extension that can be added to Visual Studio:
    [![enter image description here][8]][8]

  1. Add typescript:

    • Create a TsScript folder inside the WebUi project, just for organization (The TypeScripts won’t go to the browser, they will be transpiled into a normal JS file, and this JS file will be the one going to the wwwroot foder using gulp, this will be explained later):

    enter image description here

    • Inside that folder add “TypeScript JSON Configuration File” (tsconfig.json):

    enter image description here And add the next code:

     [![enter image description here][11]][11]
    • In the WebUi Project’s root, add a new file called typings.json:

    enter image description here And add the next code: enter image description here

    • In the Web Project root open a command line and execute “typings install”, this will create a typings folder (This requires “Open Command Line” explained as an optional step in the Note inside Step 4, numeral iii).

    enter image description here enter image description here enter image description here

  2. Add gulp to move files:

    • Add “Gulp Configuration File” (gulpfile.js) at the root of the web project:

    enter image description here

    • Add Code:

    enter image description here

  3. Add Angular 2 bootstrapping files inside the “tsScripts” folder: enter image description here

    app.component.ts enter image description here

    app.module.ts enter image description here

    main.ts

enter image description here

  1. Inside wwwroot, create the next file structure: enter image description here

  2. Inside the scripts folder (but outside app), add the systemjs.config.js: enter image description here And add the next code: enter image description here

  3. Execute Gulp Task to generate the scripts in wwwroot.

    • Right click gulpfile.js
    • Task Runner Explorer

    enter image description here i. If the tasks are not loaded (“Fail to load. See Output window”) Go to output window and take a look at the errors, most of the time are syntax errors in the gulp file.

    • Right Click “default” task and “Run” (It will take a while, and the confirmation messages are not very precise, it shows it finished but the process is still running, keep that in mind):

    enter image description here

  4. Modify Index.html like: enter image description here

  5. Now run and enjoy.

    Notes:

    • In case there are compilation errors with typescript, for example “TypeScript Virtual Project”, it is an indicator that the TypeScript version for Visual Studio is not updated according to the version we selected in the “package.json”, if this happens please install: https://www.microsoft.com/en-us/download/details.aspx?id=48593

References:

Expected errors when generating Angular 2 components in .NET Core project (version 0.8.3)

When generating new Angular 2 components in a .NET Core project, you may run into the following errors (as of version 0.8.3):

Error locating module for declaration
        SilentError: No module files found

OR

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[SOLUTION]

  1. Rename app.module.client.ts to app.client.module.ts

  2. Open app.client.module.ts: prepend the declaration with 3 dots “…” and wrap the declaration in brackets.

    For example: [...sharedConfig.declarations, <MyComponent>]

  3. Open boot-client.ts: update your import to use the new app.client.module reference.

    For example: import { AppModule } from './app/app.client.module';

  4. Now try to generate the new component: ng g component my-component

[EXPLANATION]

Angular CLI looks for a file named app.module.ts in your project, and tries to find a references for the declarations property to import the component. This should be an array (as the sharedConfig.declarations is), but the changes do not get applied

[SOURCES]

This modified text is an extract of the original Stack Overflow Documentation created by the contributors and released under CC BY-SA 3.0 This website is not affiliated with Stack Overflow