загрузка angular2 в файл cshtml

#angularjs #asp.net-mvc #razor #angular

Вопрос:

Я пытаюсь загрузить модуль angular2 в файл cshtml. У меня загрузка работает с файлом html, поэтому я попытался скопировать все необходимые скрипты в файл cshtml, но он не загружается должным образом, так как не удается загрузить / app /main

Это исходный тег HTML-файла.

 <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <script src="/node_modules/es6-shim/es6-shim.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>
    <script>

    System.config({
        packages: {
            'app': {
                defaultExtension: 'js'
            }
        },
    });
    System.import('/app/main').then(null, console.error.bind(console));
    </script>
</head>

<body>
    <div> </div>
</body>

</html>
<pm-app>
    <div>
        <p> Please wait ...</p>
    </div>
</pm-app>

И появляется следующая ошибка:

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)

Я пробовал это с помощью cshtml со следующим кодом.

 @{
    ViewBag.Title = "Index";
}
<script src="~/node_modules/es6-shim/es6-shim.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>
<script>

    System.config({
        packages: {
            'app': {
                defaultExtension: 'js'
            }
        },
    });
    System.import('/app/main').then(null, console.error.bind(console));
</script> 


<h2>Index </h2>

<pm-app>Loading App ...</pm-app>

И появляется то же сообщение об ошибке. Я также пытался
1. поместите все скрипты в раздел заголовка страницы макета
2. Помещаем раздел рендеринга на страницу макета и добавляем раздел в файл index.cshtml.

Все три попытки выдали мне одно и то же сообщение об ошибке, поэтому мне было интересно, является ли это просто плохой практикой делать это таким образом (загрузка модуля angular в cshtml) или есть какое-либо исправление для этого.

Заранее спасибо за помощь.

Приветствия.

1. Я предполагаю, что у вас неверный путь в System.import('/app/main').then(null, console.error.bind(console));

2. Привет, Павел, спасибо за ваш вклад. Я считаю, что сам путь правильный, потому что index.html находится в корневом пути. И когда я добавляю .js, поэтому, когда он вызывает ‘/app/main.js ‘ , он ищет следующий js-файл, который является app.component. Похоже, что он не распознает конфигурацию расширения js.

3. Вам не хватает <base> тега, который вам понадобится позже для angular 2 для поиска объектов, я также не уверен, правильно ли оставлять основной параметр неопределенным для System.config. Попробуйте packages: { 'app': { main: '/app/main', defaultExtension: 'js' } } , и тогда System.import('app') вам также может понадобиться карта в вашей конфигурации, поскольку карта предоставляет подсказки пути для системного загрузчика.

4. Вам нужно открыть консоль вашего браузера и фактически посмотреть на путь, который он пытается получить с сервера.

Ответ №1:

Вы просто следуете этому https://www.youtube.com/watch?v=WA4dPYlRwrEamp;spfreload=5 скопируйте ваши библиотеки в _layout.cshtml