angular - angular2 med MVC6, webbläsare kan inte komma åt skript inuti node_modules

Försöker använda Angular2 med TypeScript, vilket innebär att importera från node_modules-mappen. Jag har node_modules med inbyggt npm installerat i dess standardstatus, huvudprojektmappen, men att referera till några .js-skript på vilken webbsida som helst resulterar i 404-fel i webbläsaren. Försökte ta bort node_modules, fungerade fortfarande inte. Så efter många försök och misslyckanden är det förvånande att även i ett helt nytt ASP.NET 5-projekt som har allt förinstallerat och konfigurerat, kan webbläsaren inte komma åt refererade .js-skript i node_modules eller importera typer (den gör ajax-anrop för de skript som refereras i TypeScript-filer, och misslyckas).

Tydligen med DNX och ASP.NET 5 finns det ett undantag för node_modules i tsconfig.json och project.json tillsammans med wwwroot. Så jag försökte ta bort det alternativet, och fick då detta fel vid kompilering:

"Den angivna sökvägen, filnamnet eller båda är för långa. Det fullständigt kvalificerade filnamnet måste vara kortare än 260 tecken, och katalognamnet måste vara kortare än 248 tecken."

Intressant nog kan jag importera typer och moduler i .ts-filer och det fungerar bra i designern, vilket innebär att den känner igen de importerade typerna. Men vid körning får jag fortfarande 404-fel för de importerade modulerna och huvudsakliga Angular2-skript från node_modules. Alla förslag är välkomna eftersom jag har slut på alternativ.

Miljö

  1. Visual Studio Professional 2015 Uppdatering 1
  2. DNX 4.6.1 och 5.0
  3. Chrome version 49, Firefox version 43, IE version 11

Uppdatering

Detta är mappstrukturen:

MyWebApplication
    project.json
    package.json
    ...
    -node_modules
    ...
    -wwwroot
    ...
       -ts
         -pages
              orders-page.ts
       tsconfig.json
       typings.json
    ...

Här är skärmdumparna från _Layout.cshtml, orders-page.ts och dess fel, tsconfig.json och project.json:

Svar #1

Du kan helt enkelt kopiera alla refererade filer till wwwroot eller ännu bättre skapa en gulp/grunt-uppgift för att göra det. När det gäller problemet med fil-/katalognamnens längd - detta är fixat i senare versioner av NPM, men Visual Studio använder som standard en tidigare version, men du kan ändra det: så här gör du. Jag rekommenderar det andra alternativet, fungerar perfekt för mig. Efter att ha gjort detta, ta bara bort node_modules och återställ NPM-paketen, du bör inte få det felet igen.

Uppdatering: Du behöver inte referera till några TypeScript-filer, allt du behöver är detta i HTML där du använder Angular:

    <script src="/js/es6-shim.min.js"></script>
    <script src="/js/system-polyfills.js"></script>
    <script src="/js/shims_for_IE.js"></script>

    <script src="/js/angular2-polyfills.js"></script>
    <script src="/js/system.js"></script>
    <script src="/js/Rx.js"></script>
    <script src="/js/angular2.dev.js"></script>
    <script src="~/js/router.dev.js"></script>
    <script src="~/js/http.dev.js"></script>
    <script>
        System.config({
            packages: {
                appJs: {
                    defaultExtension: 'js'
                }
            }
        });
    </script>

Där du ersätter "appJs" med den mapp dina .ts-transpilerade filer till .js-filer
Efter det kommer import av Angular-moduler i din TypeScript att fungera bra, till exempel :

import {Component} från 'angular2/core';

kommer att importeras från node_modules/angular2/cote.ts utan att du behöver referera till det någonstans. Detta är en gulp-uppgift som kopierar de nödvändiga filerna åt dig från "node_modules" till "wwwroot/js":

var gulp = require('gulp');


gulp.task('libs', function () {
    return gulp.src([
      'node_modules/angular2/bundles/js',
      'node_modules/angular2/bundles/angular2.*.js*',
      'node_modules/angular2/bundles/angular2-polyfills.js',
      'node_modules/angular2/bundles/http.*.js*',
      'node_modules/angular2/bundles/router.*.js*',
      'node_modules/es6-shim/es6-shim.min.js*',
      'node_modules/angular2/es6/dev/src/testing/shims_for_IE.js',
      'node_modules/systemjs/dist/*.*',
      'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./wwwroot/js/'));
});

Svar #2

Så det visar sig att du måste ha ett module-element i din tsconfig.json och ställa in dess värde till system, detta är redan en del av angular2 snabbstart. Du behöver dock också lägga till ett annat element som heter moduleResolution i tsconfig.json och ställa in dess värde till "node". Detta är bara tillägg från Typescript-kompilatorn. Se Typescript modulupplösning

Dessutom, när det gäller att node_modules inte tar emot HTTP-förfrågningar, är det inte möjligt att göra det och som tidigare inlägg föreslagit skulle du behöva en gulp-uppgift för att flytta alla dina genererade .js-filer inuti wwwroot för att de ska vara synliga. Detta behöver följa samma mappstruktur som dina Typescript-mappar. Så om du har /ts/mytest.ts behöver du samma struktur under wwwroot, till exempel wwwroot/myFolder/ts/mytest.ts, men var uppmärksam på SystemJS-konfigurationen eftersom den måste peka på myFolder. Om du redan har placerat Typescript-mappen under wwwroot, föreslår jag att lägga den under projektets rot och bara flytta de genererade .js-filerna.

Relaterade artiklar