小编ton*_*one的帖子

我在开发期间有一个显示在我的Angular应用程序主页面上的图像,但是当我进行生产发布时,图像不会显示.我一直在寻找其他讨论(这个看起来很有希望,但没有解决我的问题),但仍然没有找到解决方案.我有什么想法我做错了吗？

我的图片标记如下所示:

<img alt="Rocket" src="../../images/rocket.gif" />

在生产中,它输出:

<img alt="Rocket" src="dist/0f686f4440348c6e453c282baa10b674.gif">

我确实在我的dist文件夹中查看了该文件确实存在,但似乎已损坏.那里有另一个文件,5743b3dcb9db968dd0e484850845aa54.gif,其中包含我的图像.不确定是否提供了提示.

我的webpack.config.js文件如下所示:

const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;

module.exports = (env) => {
    // Configuration in common to both client-side and server-side bundles
    const isDevBuild = !(env && env.prod);
    //const isDevBuild = false;
    const sharedConfig = {
        stats: { modules: false },
        context: __dirname,
        resolve: {
            extensions: [".ts", ".js"],
            "alias": {
                "jquery-ui":"jquery-ui-dist/jquery-ui",
                "scripts": path.resolve(__dirname, …

我目前正在尝试使安全性与新发布的Asp.Net Core 2.0上的Angular 4（4.3.5）配合使用，尤其是防伪令牌。

我正在使用JavascriptServices，它提供了入门应用程序（它是Visual Studio 2017.3中的默认Angular模板）。Javascript服务在.cshtml页面上托管Angular站点的主页。实际上，这确实是非常有益的，因为我可以使用标准表单身份验证（点网核心身份）将所有内容锁定下来，当用户不在时，将用户重定向到/ Account / Login上的单独（非Angular）登录页面。登录。然后您可以登录该页面并重定向到主页，然后在授权用户的上下文中启动并运行该spa。

该工作应用程序可以在这里找到。

最后一个难题是使ValidateAntiForgeryToken属性正常工作。当您登录到“帐户/登录”页面时，这很好，因为它不是在angular 4的上下文中运行。但是，当我在主页的Angular 4中运行时，当我向服务器发帖时，如果该属性存在，则该帖子将被ValidateAntiForgeryToken阻止。

因此，我已在Account / Logout方法上注释了ValidateAntiForgeryToken属性。这是因为我正在使用Angular http帖子从站点注销。在不使用该属性时可以使用，但是在使用该属性时会失败/被阻止。

继角4机制的文档，发现在这里，我已经改变了反伪造令牌名称以匹配角4识别。为此，我修改了Startup.cs文件，并添加了以下几行：

public void ConfigureServices(IServiceCollection services)
{
            services.AddAntiforgery(options =>
            {
                options.Cookie.Name = "XSRF-TOKEN";
                options.Cookie.HttpOnly = false;
            });
...
}

这应该使Angular应用程序能够使用Angular 4期望的名称访问Anti Forgery cookie。

在我的应用程序中，我刚刚转换为使用新的HttpClient服务（显然，不推荐使用Http服务！）应该使用拦截器将XSRF_TOKEN自动发送到服务器。

但是我一直无法完成这项工作。

我尝试使用HttpClient服务进行标准的帖子通话：

this.httpClient.post(this.baseUrl + 'Account/Logout', "", options).subscribe(result => {
    location.replace("/");
}, error => {
    console.error(error);
})

我尝试手动添加标题：

let token = this.cookieService.get("XSRF-TOKEN");
console.log(token);

var httpHeaders = new HttpHeaders({ 'XSRF-TOKEN': token })

this.httpClient.post(this.baseUrl + 'Account/Logout', "", { …

我试图在Angular 2 RC6应用程序中针对我在Visual Studio 2015中实现的AspNetCore WebApi项目实现基于令牌的简单身份验证.

我已将我的示例应用程序放在github上:https://github.com/tonywr71/Snazzle这是一个功能齐全的应用程序.

在应用程序中,我单击Login菜单项,输入登录名和密码信息,然后单击login.

它成功返回我的身份验证令牌,我将其存储在独立存储中.

然后,我单击Fetch Data菜单项,它调用一个具有Authorize属性的Sample Controller.它传递令牌,该令牌从隔离存储中检索并添加到标头中.但它失败并出现错误.

我得到的错误是"XMLHttpRequest无法加载http:// localhost:5100/api/SampleData/WeatherForecasts.预检的响应具有无效的HTTP状态代码401"

WeatherForecasts是一个WebApi方法,它返回Angular 2客户端组件使用的一些json.

401是未经授权的,并且它未经授权的原因是由于预检ORIGIN呼叫,因为没有为ORIGIN呼叫发送标头.

当我使用Postman运行它时,添加令牌后没有问题 - 方法调用有效.那是因为Postman不需要担心CORS.

所以我的问题是,如何让AspNetCore不检查ORIGIN调用的身份验证？或者,如果这不是正确的方法,我该怎么做到这一点？是否有一些我应该添加的中间件？

我目前正在尝试使用Windows身份验证运行Angular 4应用程序.我已成功运行匿名身份验证,但不是Windows身份验证.一旦我将其切换到Windows身份验证,页面就会失败.我得到的第一个错误是:

(index):38 Error: Fetch error: 401 Unauthorized
  Instantiating http://localhost:1264/app/main.js
  Loading app
    at http://localhost:1264/node_modules/systemjs/dist/system.src.js:1500:13 [<root>]
    at Zone.run (http://localhost:1264/node_modules/zone.js/dist/zone.js:125:43) [<root> => <root>]
    at http://localhost:1264/node_modules/zone.js/dist/zone.js:760:57 [<root>]
    at Zone.runTask (http://localhost:1264/node_modules/zone.js/dist/zone.js:165:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:1264/node_modules/zone.js/dist/zone.js:593:35) [<root>]
    at <anonymous> [<root>]

讨厌.但我有点理解它.SystemJs在Systemjs.config.js文件的packages部分中加载了main.js:

    packages: {
  app: {
    main: './main.js',
    defaultExtension: 'js'
  },

所以问题与此有关.我在某个地方读到要解决这个问题,我必须添加更多属性,如下所示:

packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js',
        format: 'register',
        scriptLoad: true
      },

格式和scriptLoad属性似乎让我通过未经授权的标签,但现在我有另一个问题.它现在给我以下错误:

Uncaught Error: Module name "@angular/platform-browser-dynamic" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
    at F …

我刚刚使用 ng update 将我的应用程序从 9 的最新版本升级到了 angular 10。我知道有重大变化，并且在大多数情况下它升级得很好，但是我目前从 exceljs 收到错误：

"export 'Workbook' (imported as 'Excel') was not found in 'exceljs/dist/exceljs'

在升级之前，它使用的是 exceljs 2.0.1 版。现在它使用的是 exceljs 4.0.1。（它是最新版本之前的一个版本，因为由于选项参数被标记为必需，因此会出现阻止在最新版本中编译的错误。这应该无关紧要。）

导入语句如下：

import * as Excel from "exceljs/dist/exceljs";

代码本身对于 exceljs 来说非常典型。我有一个提供数据的服务：HttpResponse，我将它加载到工作簿中，以便我可以提取一些列。

this.myService.getMySpreadsheet().subscribe((data: HttpResponse<Blob>) => {
      new Response(data.body).arrayBuffer().then(arrayBuffer => {
        const wb: Excel.Workbook = new Excel.Workbook();
        wb.xlsx.load(arrayBuffer).then(() => {

          const ws1 = wb.getWorksheet("My Worksheet");

但是现在它甚至无法访问该代码，因为角度编译已损坏。

知道如何解决这个问题吗？我需要添加某种向后兼容标志吗？